<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      :style="{ height: 'height' }"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  // props: ["commonData", "height"],
  props: ["oilstoneX", "oilstoneY"],

  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    oilstoneY: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;
          setTimeout(() => {
            this.initChart();
            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
          }, 100);
        }
      },
      immediate: true,
    },
    oilstoneX: {
      handler(newVal) {
        if (newVal) {
          this.xDatas = newVal;
        }
      },
      immediate: true,
    },
  },

  mounted() {
    // setTimeout(() => {
    //   this.initChart();
    //   window.addEventListener("resize", this.screenAdapter);
    //   // 在页面加载完成的时候, 主动进行屏幕的适配
    //   this.screenAdapter();
    // }, 100);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const payload = {
        id: "left-bottom-1",
        title: "实际油石比(%)",

        data: {
          // data1: ["10", "19", "68", "210", "125"],
          data1: this.allData,
          // x: ["04-29 14:59", "04-29 15:59", "04-29 16:59", "04-29 17:59", "04-29 18:59"],
          x: this.xDatas,
          total1: 197,
          total2: 197,
        },
      };

      const data1 = payload.data.data1;
      const x = payload.data.x;

      var option = {
        grid: {
          left: 15,
          right: 15,
          bottom: 2,
          top: 45,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(9, 30, 60, 0.6)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
          borderWidth: 0,
          confine: false,
          appendToBody: true,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        legend: {
          width: window.innerWidth < 1600 ? "100%" : "60%",
          icon: "rect",
          top: 7,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
          },
          align: "left",
        },
        xAxis: {
          data: x,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              color: "rgba(126, 134, 142, 0.5)",
              width: 0.8,
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
          },
        },
        yAxis: [
          {
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 129, 109, 0.1)",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              color: "rgba(23, 26, 29, 1)",
              fontSize: 14,
            },
            splitArea: {
              areaStyle: {
                color: "rgba(255,255,255,.5)",
              },
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(126, 134, 142, 0.24)",
                type: "dotted",
              },
            },
          },
        ],
        series: [
          {
            name: payload.title,
            type: "pictorialBar",
            barGap: "-20%",
            symbol: "path://M18,3 L46,3 78,68 18,68 46,3 z",

            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(146, 217, 67, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(146, 217, 67, 0.1)",
                  },
                ],
                global: false, //  缺省为  false
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: data1,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },

    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      // console.log(titleFontSize);

      //   和分辨率大小相关的配置项
      const adapterOption = {
        legend: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
          itemWidth: titleFontSize * 1.2876,
          // itemHeight: titleFontSize * 1.2876,
          itemGap: titleFontSize * 3,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        yAxis: [
          // {
          //   axisLabel: {
          //     textStyle: {
          //       fontSize: titleFontSize * 1.2,
          //     },
          //   },
          // },
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        series: [
          // {
          //   barWidth: titleFontSize * 7, //柱子宽
          // },
          {
            barWidth: titleFontSize * 7, //柱子宽度
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
